<template>
  <div class="flex v-align-c">
    <div class="bgc-dark-blue font-white height-47 box-border category-nav position-r">
      <el-collapse v-model="collapseNames" class="collapse">
        <el-collapse-item title="全部分类" name="1" :disabled="collapse" class="collapse-item" @mouseover="collapseOver" @mouseout="collapseOut">
          <div class="category-links">
            <div v-for="(item, index) in categoryData" :key="index" class="category-item">
              <h2 class="flex v-align-c cursor-p" @click="categoryPage(item.categoryId, item.aliasName ? item.aliasName : item.label, '')">
                <span class="flex-item font-16">{{ item.aliasName ? item.aliasName : item.label }}</span>
                <el-icon color="#c5c6ce" :size="15" class="mar-t--2">
                  <arrow-right />
                </el-icon>
              </h2>
              <div class="pad-t-4 mar-r--10">
                <span v-for="(itemSub, indexSub) in item.children" :key="indexSub"
                  class="mar-r-26 cursor-p pad-t-3 pad-b-3"
                  @click="categoryPage(itemSub.categoryId, item.aliasName ? item.aliasName : item.label, itemSub.aliasName ? itemSub.aliasName : itemSub.label)">{{ itemSub.aliasName ? itemSub.aliasName : itemSub.label }}</span>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="font-16 recommend-link mar-t--6 pad-l-5">
      <span v-for="(item,index) in linkDataList"  :key="index" @mouseover="handleOver($event)" @mouseout="handleOut($event)"
        @click="handleJumpPage(item)">{{item.text}}</span>

      <!--      <span :class="recommendIndex ? '' : 'actived'" @click="recommendEls(0)">每日新款</span>
      <span :class="recommendIndex === 1 ? 'actived' : ''" @click="recommendEls(1)">实力卖家</span>
      <span :class="recommendIndex === 2 ? 'actived' : ''" @click="recommendEls(2)">买手精选</span>
      <span :class="recommendIndex === 3 ? 'actived' : ''" @click="recommendEls(3)">找档口</span> -->
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted,
    watch
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    ArrowRight
  } from '@element-plus/icons-vue'
  import {
    getGoodsCategoryTree
  } from '@/api/goods/goodsCategory'
  import {
    jumpPage
  } from '@/utils/jumpPageUtils'
  export default defineComponent({
    name: 'CategoryBar',
    components: {
      ArrowRight
    },
    props: {
      collapse: Boolean,
      linkDataList: Object
    },
    setup(props, context) {
      const router = useRouter()
      const recommendIndex = ref(0)
      const collapseNames = ref( < any > [])
      const categoryData = ref( < any > [])
      const linkDataList = ref([])

      onMounted(() => {
        if (!props.collapse) {
          collapseNames.value = []
        } else {
          collapseNames.value = ['1']
        }
        linkDataList.value = props.linkDataList
        // 初始化获取商品分类数据
        initGoodsCategoryTree()
      })

      watch(() => props.linkDataList, (newVal, oldVal) => {
        linkDataList.value = newVal
      })

      const categoryPage = (categoryId: any, itemName: String, childrenName: String) => {
        router.push({
          path: '/category',
          query: {
            categoryId: categoryId,
            categoryName: childrenName ? itemName + '-' + childrenName : itemName
          }
        })
      }
      const recommendEls = (val: number) => {
        recommendIndex.value = val
      }
      const handleJumpPage = (item) => {
        jumpPage(router, item.hasLink, item.linkTarget, item.linkType, item.linkParams, item.newPage)
      }

      const handleOver = ($event) => {
        $event.currentTarget.className = "actived"
      }

      const handleOut = ($event) => {
        $event.currentTarget.className = ""
      }

      const collapseOver = () => {
        if(props.collapse) return
        collapseNames.value = ['1']
      }
      const collapseOut = () => {
        if(props.collapse) return
        collapseNames.value = []
      }

      const initGoodsCategoryTree = () => {
        getGoodsCategoryTree().then(response => {
          categoryData.value = response.data
        })
      }

      return {
        categoryPage,
        collapseNames,
        categoryData,
        recommendIndex,
        recommendEls,
        linkDataList,
        handleJumpPage,
        handleOver,
        handleOut,
        collapseOver,
        collapseOut
      }
    }
  })
</script>

<style lang="scss" scoped>
  $categoryWidth: 264px;
  $categoryHeight: 526px;

  .category-nav {
    width: $categoryWidth;

    ::v-deep(.collapse) {
      &.el-collapse {
        --el-collapse-border-color: none;
        --el-collapse-header-background-color: none;
        --el-collapse-header-height: 47px;
      }

      .el-collapse-item.is-disabled .el-collapse-item__header {
        cursor: text;
      }

      .el-collapse-item__arrow {
        display: none;
      }

      .el-collapse-item__header {
        font-weight: bold;
        color: #fff;
        padding-left: 19px;
      }

      .el-collapse-item__header.is-active.focusing {
        color: #fff;
      }

      .category-links{
        position: absolute;
        left: 0;
        top: 47px;
        width: $categoryWidth;
        height: $categoryHeight;
        background: #fff;
        box-sizing: border-box;
        z-index: 20;
        overflow: hidden;
        .category-item{
          max-height: 131px;
          padding: 8px 20px;
          overflow: hidden;
          &:hover{
            background: #f3f6ff;
          }
        }
        h2{
          margin: 0;
          padding: 0;
        }
        span{
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }

  .recommend-link {
    span {
      margin: 0 15px;
      cursor: pointer;
      color: #182245;
      font-weight: bold;
      position: relative;

      &.actived {
        font-weight: bold;
        color: #182245;
        &:after{
          content: '';
          display: block;
          clear: both;
          font-size: 0;
          position: absolute;
          left: 0;
          bottom: -12px;
          z-index: 10;
          width: 100%;
          height: 2px;
          background: #182245;
        }
      }
    }
  }
</style>
